<!-- 首页 -->
<template>
  <div class="container">
    <Nav></Nav>
    <!-- ------------------------banner--------------------------------- -->
    <div class="banner">
      <div class="swiper-container">
        <div v-swiper:mySwiper="swiperOption">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in banner" :key="index">
              <a :href="item.link" target="_blank">
                <img :src="item.image_url" :alt="item.description">
              </a>
            </div>
          </div>
          <div class="swiper-pagination" slot="pagination"></div>
        </div>
        <div class="banner_lot">
          <div class="notice_shadow"></div>
          <div class="notice">
            <div class="notice_title">
              <li><img src="../assets/img/notice.png" alt=""></li>
              <router-link tag="li" to="/exam/2340/0">更多</router-link>
            </div>
            <div class="notice_list">
              <nuxt-link tag="li"
                :to="'/examInfor/' + item.news_id + '/' + item.cat_one_id"
                v-for="(item, index) of newList"
                :key="index"
                :class="item.is_hot === 1 ? 'active' : ''">
                <p>{{item.title}}</p>
                <p>{{item.publish_time}}</p>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- -----------------------近期考试------------------------------------ -->
    <div class="recent">
      <div class="recent_top">
        <li>地区考试</li>
        <nuxt-link
          v-for="(item, index) of news_area"
          :key="index"
          :class="item.is_have_new === 1 ? 'active' : ''"
          tag="li"
          :to="'/exam/' + (item.city_id == 0 ? 2340 : item.city_id) + '/' + 0"
          >
            <p>{{item.name}}</p>
            <p v-if="item.is_have_new === 1"><img src="../assets/img/new.png" alt=""></p>
        </nuxt-link>
      </div>
      <div class="recent_bottom">
        <div class="recent_title">
          <p><img src="../assets/img/recent.png" alt="近期考试"></p>
          <div class="article_page">
            <div class="page_num">
              <li
                v-for="(item, index) of allNum"
                :key="index"
                @click="pageSort(index)">
                <p>{{item}}</p>
                <p :class="pagestatus === index ? 'show' : 'hidden'"></p>
              </li>
            </div>
            <div class="page_button">
              <li @click="Sleft()"><img src="../assets/img/left.png" alt=""></li>
              <li @click="Sright()"><img src="../assets/img/right.png" alt=""></li>
            </div>
          </div>
        </div>
        <div class="recent_list">
          <div
            class="recent_lists"
            @mouseenter="moveB($event)"
            @mouseleave="moveO($event)"
            v-for="(item, index) of testList"
            :key="index">
            <div class="lists_info">
              <li>{{item.exam_name}}</li>
              
              <a :href="item.enroll_url" v-if="item.enroll_url">{{item.exam_enroll}}</a>
              <li v-else>{{item.exam_enroll}}</li>
              <a :href="item.result_url" v-if="item.result_url">{{item.exam_result}}</a>
              <li v-else>{{item.exam_result}}</li>
              <a :href="item.face_url" v-if="item.face_url">{{item.exam_face}}</a>
              <li v-else>{{item.exam_face}}</li>
              <nuxt-link tag="li" :to="'/courseInfor/' + item.id" v-show="item.course_ids">课程推荐</nuxt-link>
            </div>
            <div
              class="lists_map"
              :class="item.key">
              <li>{{item.city_names}}</li>
              <li>{{item.cate_name}}</li>
            </div>
            <div class="recent_line"></div>
          </div>
        </div>
      </div>
      <div class="top">
        <li @click="top1()">近期考试</li>
        <li @click="top2()">岸上讲师</li>
        <li @click="top3()">备考打卡</li>
        <li @click="top4()">免费课程</li>
      </div>
    </div>
    <!-- ---------------------------------岸上讲师------------------------------------ -->
    <div class="Lecturer">
      <div class="Lecturer_title">
        <img src="../assets/img/lecturer.png" alt="岸上讲师">
      </div>
      <div class="Lecturer_content">
        <div class="articlet">
          <div class="articles" ref="a">
            <div class="swiper-containerB swiper-no-swiping">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide article_tip tip1"
                  v-for="(item, index) of teacher_lists"
                  :key="index">
                  <li>{{item.employ_name}}</li>
                  <li>{{item.description}}</li>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="article_bottom">
          <div class="swiper-containerc swiper-no-swiping">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) of teacher_lists" :key="index">
                <img :src="item.bodyimgurl" :alt="item.employ_name">
              </div>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prevs">
          </div>
          <div class="swiper-button-nexts">
          </div>
        </div>
      </div>
    </div>
    <!-- 匠心相随  岸上相会 -->
    <Originality></Originality>
    <!-- 匠心相随  岸上相会 -->
    <!-- -----------------------------备考打卡-------------------------------------------- -->
    <div class="known">
      <div class="known_title">
        <img src="../assets/img/Known.png" alt="备考打卡">
      </div>
      <div class="known_body">
        <div class="known_one">
          <div class="known_one_title" @click="shore(1)">
            <ol>
              <p>每日备考</p>
              <p>你想要的都在这里</p>
            </ol>
          </div>
          <li
            v-for="(item, index) of knowList.type_1"
            :key="index"><a :href="item.link" target="_blank">{{item.article_name}}</a></li>
        </div>
        <div class="known_two">
          <div class="known_two_title" @click="shore(2)">
            <ol>
              <p>每日一练</p>
              <p>打好知识点基础</p>
            </ol>
          </div>
          <li
            v-for="(item, index) of knowList.type_2"
            :key="index"><a :href="item.link" target="_blank">{{item.article_name}}</a></li>
        </div>
        <div class="known_three">
          <div class="known_three_title" @click="shore(3)">
            <ol>
              <p>每日一讲</p>
              <p>日积月累早日“上岸”</p>
            </ol>
          </div>
          <li
            v-for="(item, index) of knowList.type_3"
            :key="index"><a :href="item.link" target="_blank">{{item.article_name}}</a></li>
        </div>
        <div class="known_four">
          <div class="known_four_title" @click="shore(4)">
            <ol>
              <p>小视频</p>
              <p>“不一样”的公务员</p>
            </ol>
          </div>
          <li
            v-for="(item, index) of knowList.type_4"
            :key="index"><a :href="item.link" target="_blank">{{item.article_name}}</a></li>
        </div>
      </div>
    </div>
    <!-- ------------------------------------------免费课程---------------------------------------------------------- -->
    <div class="lesson">
      <div class="lesson_title">
        <li><img src="../assets/img/Free.png" alt=""></li>
        <router-link tag="li" to="/freeLesson">更多</router-link>
      </div>
      <div class="lesson_list">
        <nuxt-link
          class="lesson_lists"
          @mouseenter="moveB($event)"
          @mouseleave="moveO($event)"
          v-for="(item, index) of freeList"
          :key="index"
          tag="div"
          :to="'/freelesson/' + item.id + '/' + item.is_limit_play">
          <div class="lesson_lists_title">
            <img :src="item.vide_img" alt="">
          </div>
          <div class="lesson_bottom">
            <li>{{item.video_name}}</li>
            <li>观看次数：{{item.view_count}}次</li>
          </div>
          <div class="lesson_line"></div>
        </nuxt-link>
      </div>
    </div>
    <!-- 备考打卡 -->
    <!-- <known :known="knowList" v-if="flag"></known> -->
    <!-- 备考打卡 -->
    <!-- 免费课程 -->
    <!-- <Lesson></Lesson> -->
    <!-- 免费课程 -->
    <!-- 学员评价 -->
    <Student></Student>
    <!-- 学员评价 -->
    <!-- 底部 -->
    <Bottom></Bottom>
    <!-- 底部 -->
  </div>
</template>

<script>
import Swiper from 'swiper'
import Nav from '~/components/Nav/nav'
import Bottom from '~/components/Bottom/bottom'
import Student from '~/components/Student/student'
import Originality from '~/components/Originality/originality'
export default {
  async asyncData (ctx) {
    let [data, data1, data2, data3] = await Promise.all([
      ctx.app.$http.post('/index/wwwIndex'),
      ctx.app.$http.post('/course/getExamLists', {
        is_top: 1,
        page: 1,
        page_count: 20
      }),
      ctx.app.$http.post('/news/newsLists', {
        news_type: 1,
        is_top: 1
      }),
      ctx.app.$http.post('/link/getVideolists')
    ])
    // testList: data.data,
    return {
      banner: data.data.data.pc_www_top_banner.img_lists,
      testList: data1.data.data,
      newList: data2.data.data,
      teacher_lists: data.data.data.teacher_lists,
      knowList: data.data.data.link_article_list,
      freeList: data3.data.data
    }
  },
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ],
      title: '岸上教育-官网-山西公务员考试网_山西省事业单位/教师招聘考试时间',
      meta:[{
        hid: 'description',
        name: 'description',
        content: '岸上教育提供山西公务员考试/国考/教师/事业单位招聘公告、报名时间、职位表、报名入口、成绩查询、面试等考试信息，是山西省人事考试信息网站和山西公职考试备考网站'
      },{
        hid: 'Keywords',
        name: 'Keywords',
        content: '山西人事考试网,山西省考面试,山西事业单位招聘,山西公务员考试网,山西特岗教师招聘'
      }]
    }
  },
  name: 'index',
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          // 自定义分页器， bulletClass 是常规的分页名字， bulletActiveClass是active时候的名字
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      },
      // 免费课程
      freeList: [],
      // 岸上讲师
      index: 0,
      length: 0,
      show: true,
      // banner列表
      newList: [],
      // 老师列表
      teacher_lists: [],
      // 轮播
      banner: [],
      // 新闻广告地区
      news_area: [],
      // 岸上早知道
      knowList: [],
      // 分页
      testList: [],
      list: [
        {
          3390: '全国',
          2340: '山西',
          2341: '太原',
          2352: '长治',
          2366: '大同市',
          2378: '晋城市',
          2385: '晋中市',
          2397: '临汾市',
          2415: '吕梁市',
          2429: '朔州市',
          2436: '忻州市',
          2451: '阳泉市',
          2457: '运城市'
        }
      ],
      allNum: 0,
      page: 1,
      page_count: 6,
      pagestatus: 0
    }
  },

  created () {
    this.Course()
    this.newLists()
    this.noFree()
  },

  mounted () {
    this.Infor()
    window.addEventListener('scroll', this.handleScroll)
    window.addEventListener('resize', this.handleResize)
    // eslint-disable-next-line
    setTimeout(() => {
      new Swiper('.swiper-containerB', {
        autoplay: false,
        loop: true,
        slidesPerView: 1,
        initialSlide: 1,
        // roundLengths: true,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-nexts',
          prevEl: '.swiper-button-prevs'
        }
      })
      // eslint-disable-next-line
      new Swiper('.swiper-containerc', {
        autoplay: false,
        loop: true,
        slidesPerView: 6,
        // roundLengths: true,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-nexts',
          prevEl: '.swiper-button-prevs'
        }
      })
      $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide.swiper-slide-next').attr('data-swiper-slide-index', '1').animate({
        width: '220px'
      })
      $('.swiper-button-prevs').on('click', () => {
        if (this.length === 0) {
          // ----------------------------
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().animate({
            width: '220px'
          }).siblings().animate({
            width: '175px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().find('img').animate({
            width: '216px',
            height: '288px',
            marginTop: '4px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().siblings().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().animate({
            width: '175px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().next().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().next().animate({
            width: '175px'
          })
          // ----------------------------
        }
        this.show = false
      })
      $('.swiper-button-nexts').on('click', (e) => {
        if (this.length === 0) {
          // -----------------------------
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().animate({
            width: '220px'
          }).siblings().animate({
            width: '175px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().find('img').animate({
            width: '216px',
            height: '288px',
            marginTop: '4px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().siblings().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().animate({
            width: '175px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().next().find('img').animate({
            width: '101px',
            height: '137px',
            marginTop: '155px'
          })
          $('.swiper-containerc').find('.swiper-wrapper').find('.swiper-slide-prev').next().next().next().animate({
            width: '175px'
          })
          // -----------------------------
        }
        this.show = false
        this.length = 0
        e.stopPropagation()
      })
    }, 800)
  },

  components: {
    Nav,
    Bottom,
    Student,
    // Lesson,
    // known,
    Originality
  },

  computed: {
    // 这里计算数据的长度，以此来判断是否显示，这个貌似要必写
     showSwiper () {
       return this.banner.length
     }
  },

  methods: {
    // --------------------------------免费课程---------------------------------------
    // 鼠标移上动画
    moveB (e) {
      $(e.target).find('.lesson_line').stop().animate(
        {
          width: '285px'
        }
      )
    },
    // 鼠标移出动画
    moveO (e) {
      $(e.target).find('.lesson_line').stop().animate(
        {
          width: '0px'
        }
      )
    },
    // 免费课程
    noFree () {
      this.$http.post('/link/getVideolists', {
        page: 1,
        page_count: 4
      }).then((res) => {
        this.freeList = res.data.data
      })
    },
    // ------------------------------备考打卡---------------------------------------------
    // 点击跳转
    shore (id) {
      this.$router.push({
        name: 'shore',
        params: {
          shoreId: id
        }
      })
    },
    // ------------------------------banner-----------------------------------------
    // 招考公告
    newLists () {
      this.$http.post('/news/newsLists', {
        news_type: 1,
        is_top: 1
      }).then((res) => {
        this.newList = res.data.data
        this.newList.map((res, index) => {
          var time = this.getDay(res.publish_time)
          this.newList[index].publish_time = time
        })
      })
    },
    // 获取时间戳转年月日
    getDay (data) {
      var date = new Date(data * 1000)
      // var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // h = date.getHours() + ':'
      // m = date.getMinutes() + ':'
      // s = date.getSeconds()
      return M + D
    },
    // ------------------------------近期考试----------------------------------------------
    // 分页右侧
    Sleft () {
      if (this.page !== 1) {
        this.page -= 1
        this.pagestatus = this.page - 1
        this.Course()
      }
    },
    // 分页左侧
    Sright () {
      if (this.page !== this.allNum) {
        this.page += 1
        this.pagestatus = this.page - 1
        this.Course()
      }
    },
    handleResize (e) {
      var width = $(window).width()
      if (width <= 1300) {
        $('.top').hide()
      } else {
        $('.top').show()
      }
    },
    top1 () {
      window.scrollTo({
        top: 300,
        behavior: 'smooth'
      })
    },
    top2 () {
      window.scrollTo({
        top: 1000,
        behavior: 'smooth'
      })
    },
    top3 () {
      window.scrollTo({
        top: 2000,
        behavior: 'smooth'
      })
    },
    top4 () {
      window.scrollTo({
        top: 2400,
        behavior: 'smooth'
      })
    },
    // 监听滚动
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop < 230) {
        var a = 230 - scrollTop
        $('.top').css('top', 300 + a)
      } else if (scrollTop > 2200) {
        $('.top').css('top', 150)
      }
    },
    // 鼠标移上动画
    moveB (e) {
      $(e.target).find('.recent_line').stop().animate(
        {
          width: '387px'
        }
      )
      $(e.target).find('.lists_info li:last-child').css('color', '#ffffff')
    },
    // 鼠标移出动画
    moveO (e) {
      $(e.target).find('.recent_line').stop().animate(
        {
          width: '0px'
        }
      )
      $(e.target).find('.lists_info li:last-child').css('color', '#ffffff')
    },
    // 分页点击
    pageSort (index) {
      this.page = index + 1
      this.pagestatus = index
      this.Course()
    },
    // 近期考试
    Course () {
      // this.$qs.stringify
      this.$http.post('/course/getExamLists', {
        is_top: 1,
        page: this.page,
        page_count: this.page_count
      }).then((res) => {
        this.testList = res.data.data
        this.allNum = res.data.all_num
        if (this.allNum > 0) {
          this.allNum = Math.ceil(Number(this.allNum) / Number(this.page_count))
        }
        this.testList.map((r, index) => {
          for (const key in this.list[0]) {
            if (Number(key) === Number(r.city_id)) {
              this.testList[index].city_names = this.list[0][key]
              this.testList[index].key = 'sx' + key
            }
            if (Number(key) === Number(r.province_id) && Number(r.city_id) === 0) {
              this.testList[index].city_names = this.list[0][key]
              this.testList[index].key = 'sx' + key
            }
          }
        })
      })
    },
    // 选择城市
    tapCity (id, city) {
      let routeData = this.$router.resolve({
        name: 'exam',
        query: {
          id: id,
          city: city
        }
      })
      window.open(routeData.href, '_blank')
    },
    // 首页信息
    Infor () {
      this.$http.post('/index/wwwIndex').then((result) => {
        this.teacher_lists = result.data.data.teacher_lists
        this.banner = result.data.data.pc_www_top_banner.img_lists
        this.news_area = result.data.data.news_area
        this.knowList = result.data.data.link_article_list
      })
    }
  }
}

</script>
<style lang='scss'>
// ------------------------------免费课程----------------------------------------------
.lesson_line{
  position: absolute;
  z-index: 2;
  bottom: 0px;
  width: 0px;
  height: 3px;
  background:rgba(255,190,24,1);
  left: -1px;
}
.lesson{
  width: 1200px;
  height: auto;
  margin: 60px auto 0px;
}
.lesson_title{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 29px;
  line-height: 29px;
}
.lesson_title li:last-child{
  width: 40px;
  cursor: pointer;
  background: url('../assets/img/add.png') no-repeat;
  background-position: 30px 2px;
}
.lesson_title li:last-child:hover{
  width: 40px;
  cursor: pointer;
  background: url('../assets/img/add_hover.png') no-repeat;
  background-position: 30px 2px;
}
.lesson_list{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.lesson_lists{
  width: 285px;
  height: 385px;
  margin-left: 20px;
  border:1px solid rgba(240,240,240,1);
  box-sizing: border-box;
  background: #f7f9fb;
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
  position: relative;
  z-index:1;
  cursor: pointer;
}
.lesson_lists:hover{
  background: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.12);
}
.lesson_lists:nth-child(4n + 1){
  margin-left: 0px;
}
.lesson_lists_title{
  width: 285px;
  height: 285px;
  margin-left: -1px;
  overflow: hidden;
}
.lesson_lists_title img{
  width: 100%;
  height: 285px;
}
.lesson_bottom{
  box-sizing: border-box;
  padding: 12px;
}
.lesson_bottom li{
  height:42px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lesson_bottom li:last-child{
  height:19px;
  font-size:14px;
  line-height:19px;
}
// ----------------------------备考打卡---------------------------------------------
.known{
  width: 1200px;
  height: 276px;
  margin: 60px auto 0px;
}
.known_title{
  height:29px;
  font-size:20px;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:29px;
}
.known_body{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.known_one{
  height: 227px;
  width: 285px;
  cursor: pointer;
}
.known_one_title:hover{
  box-shadow:0px 6px 10px 0px rgba(24,144,255,0.4);
}
.known_one_title{
  height: 120px;
  background-image: url('https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/1.png');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 26px 24px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.known_one_title ol{
  color: #ffffff;
}
.known_one_title ol p{
  font-size:20px;
  line-height:26px;
}
.known_one_title ol p:last-child{
  font-size: 14px;
  line-height: 19px;
  margin-top: 8px;
}
.known_one li{
  height:21px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 12px;
}
.known_one li a{
  width: 100%;
  display: block;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.known_one li a:hover{
  color: #3ba1ff;
}

.known_two{
  height: 227px;
  width: 285px;
  margin-left: 20px;
  cursor: pointer;
}
.known_two_title:hover{
  box-shadow:0px 6px 10px 0px rgba(255,122,69,0.4);
}
.known_two_title{
  height: 120px;
  background-image: url('https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/2.png');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 26px 24px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.known_two_title ol{
  color: #ffffff;
}
.known_two_title ol p{
  font-size:20px;
  line-height:26px;
}
.known_two_title ol p:last-child{
  font-size: 14px;
  line-height: 19px;
  margin-top: 8px;
}
.known_two li{
  height:21px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 12px;
}
.known_two li a{
  width: 100%;
  display: block;
  text-decoration: none;
}
.known_two li a:hover{
  color: #3ba1ff;
}

.known_three{
  height: 227px;
  width: 285px;
  margin-left: 20px;
  cursor: pointer;
}
.known_three_title:hover{
  box-shadow:0px 6px 10px 0px rgba(8,151,156,0.4);
}
.known_three_title{
  height: 120px;
  background-image: url('https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/3.png');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 26px 24px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.known_three_title ol{
  color: #ffffff;
}
.known_three_title ol p{
  font-size:20px;
  line-height:26px;
}
.known_three_title ol p:last-child{
  font-size: 14px;
  line-height: 19px;
  margin-top: 8px;
}
.known_three li{
  height:21px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 12px;
}
.known_three li a{
  width: 100%;
  display: block;
  text-decoration: none;
}
.known_three li a:hover{
  color: #3ba1ff;
}

.known_four{
  height: 227px;
  width: 285px;
  margin-left: 20px;
  cursor: pointer;
}
.known_four_title:hover{
  box-shadow:0px 6px 10px 0px rgba(250,173,20,0.4);
}
.known_four_title{
  height: 120px;
  background-image: url('https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/4.png');
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 26px 24px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.known_four_title ol{
  color: #ffffff;
}
.known_four_title ol p{
  font-size:20px;
  line-height:26px;
}
.known_four_title ol p:last-child{
  font-size: 14px;
  line-height: 19px;
  margin-top: 8px;
}
.known_four li{
  height:21px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top: 12px;
}
.known_four li a{
  width: 100%;
  display: block;
  text-decoration: none;
}
.known_four li a:hover{
  color: #3ba1ff;
}
// ----------------------------近期考试-------------------------------------------
.sx2341{
  background: url('../assets/img/2341.png') no-repeat;
}
.sx2340{
  background: url('../assets/img/2340.png') no-repeat;
}
.sx3390{
  background: url('../assets/img/3390.png') no-repeat;
}
.sx2352{
  background: url('../assets/img/2352.png') no-repeat;
}
.sx2366{
  background: url('../assets/img/2366.png') no-repeat;
}
.sx2378{
  background: url('../assets/img/2378.png') no-repeat;
}
.sx2385{
  background: url('../assets/img/2385.png') no-repeat;
}
.sx2397{
  background: url('../assets/img/2397.png') no-repeat;
}
.sx2415{
  background: url('../assets/img/2415.png') no-repeat;
}
.sx2429{
  background: url('../assets/img/2429.png') no-repeat;
}
.sx2436{
  background: url('../assets/img/2436.png') no-repeat;
}
.sx2451{
  background: url('../assets/img/2451.png') no-repeat;
}
.sx2457{
  background: url('../assets/img/2457.png') no-repeat;
}
// 分页
.article_page{
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.page_num{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 30px;
}
.page_num li{
  cursor: pointer;
  margin-left: 20px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  font-size:18px;
  font-weight:bold;
}
.page_num li:hover p:first-child{
  color: rgba(24, 144, 255, 1);
  // color: red;
}
.page_num li:first-child{
  margin-left:0px;
}
.page_num li p:last-child{
  width:7px;
  height:7px;
  border:2px solid rgba(24,144,255,1);
  border-radius: 50%;
  margin:  0 auto;
}
.page_num li p.show{
  display: block;
}
.page_num li p.hidden{
  display: none;
}
.page_num li p.show{
  display: block;
}
.page_num li p.hidden{
  display: none;
}
.page_button{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.page_button li{
  margin-left: 20px;
  cursor: pointer;
}
.page_button li:first-child{
  margin-left: 0px;
}
.page_button li img{
  width: 30px;
  height: 30px;
}
// 分页
.top{
  width: 50px;
  height: 300px;
  position: fixed;
  z-index: 999;
  left: 10px;
  top: 300px;
}
.top li{
  width: 50px;
  height: 50px;
  background: #1890FF;
  box-sizing: border-box;
  padding: 6px;
  margin-bottom: 4px;
  color: rgba(255,255,255,1);
  cursor: pointer;
  text-align: center;
}
.top li:hover{
  background: #3BA1FF;
}
.recent{
  width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.recent_top{
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 19px;
  margin-top: 30px;
}
.recent_top li{
  margin-left: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  // position: relative;
  // z-index: 1;
}
.recent_top li.active{
  font-size:14px;
  color:rgba(204,41,41,1);
}
.recent_top li:first-child{
  margin-left: 0px;
}
.recent_top li:nth-child(2){
  margin-left: 40px;
}
.recent_bottom{
  width: 100%;
}
.recent_title{
  height: 29px;
  line-height: 29px;
  margin-top: 33px;
  font-size:20px;
  font-weight:bold;
  color:rgba(34,34,34,1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.recent_list{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.recent_lists{
  width: 387px;
  height: 176px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgba(247, 249, 251, 1);
  border:1px solid rgba(240,240,240,1);
  margin-left: 19px;
  margin-top: 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.recent_lists:hover{
  background: #ffffff;
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.15);
}
.recent_line{
  position: absolute;
  z-index: 2;
  top: 0px;
  width: 0px;
  height: 3px;
  background:rgba(255,190,24,1);
  left: -1px;
}
.recent_lists:first-child{
  margin-left: 0px;
}
.recent_lists:nth-child(4n){
  margin-left: 0px;
}
.lists_info{
  height: 176px;
  box-sizing: border-box;
  padding: 16px;
}
.lists_info a{
  display: block;
  text-decoration: none;
}
.lists_info a:hover{
  color: rgba(24, 144, 255, 1);
}
.lists_info li:first-child{
  font-size: 16px;
  line-height: 21px;
  margin-bottom: 12px;
}
.lists_info li{
  font-size:14px;
  color:rgba(34,34,34,1);
  height: 19px;
  line-height:19px;
  margin-bottom: 3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lists_info li:last-child{
  margin-bottom: 0px;
  width:100px;
  height:36px;
  background:linear-gradient(137deg,rgba(32,199,255,1) 0%,rgba(24,144,255,1) 100%);
  border-radius:25px;
  color: #ffffff;
  font-size:16px;
  line-height: 36px;
  text-align: center;
  margin-top: 14px;
}
.lists_map{
  width: 120px;
  height: 176px;
  // background: url('../../../assets/img/2352.png') no-repeat;
  box-sizing: border-box;
  padding: 16px 4px;
}
.lists_map li{
  margin-top: 12px;
  font-size:16px;
  color:rgba(136,136,136,1);
  line-height:21px;
}
.lists_map li:first-child{
  margin-top: 0px;
}
// ------------------------------banner--------------------------------------------
.swiper-pagination{
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  z-index: 9;
  box-sizing: border-box;
  padding-left: 400px;
}
.swiper-pagination .my-bullet{
  // border-radius: 50%;
  width: 30px;
  height: 4px;
  margin: 4px;
  background: rgba(0,0,0,0.35);
  display: block;
}
.swiper-pagination .my-bullet-active{
  display: block;
  background: rgba(0,0,0,0.75);
  width: 30px;
  height: 4px;
  // border-radius: 2px;
}
.swiper-slide a{
  display: block;
}
.swiper-slide a img{
  width: 100%;
}
.banner{
  min-width: 1200px;
  position: relative;
  z-index: 1;
}
.banner_lot{
  width: 1200px;
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.notice_shadow{
  width: 387px;
  height: 265px;
  background: #ffffff;
  position: absolute;
  z-index: 8;
  top: 100px;
  right: 0px;
  opacity: 0.5;
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
}
.notice{
  width: 387px;
  height: 285px;
  background: #ffffff;
  position: absolute;
  z-index: 8;
  top: 90px;
  right: 10px;
  box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  box-sizing: border-box;
  padding: 16px 24px;
}
.notice_title{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-end;
  line-height: 31px;
  font-size:22px;
  font-family:SourceHanSerifCN-Heavy;
  font-weight:bold;
  color:rgba(34,34,34,1);
}
.notice_title li{
  font-family:SourceHanSerifCN-Heavy;
  font-size: 12px;
}
.notice_title li:last-child{
  width: 40px;
  cursor: pointer;
  background: url('../assets/img/add.png') no-repeat;
  background-position: 28px 6px;
  margin-right: -10px;
}
.notice_title li:last-child:hover{
  width: 40px;
  cursor: pointer;
  background: url('../assets/img/add_hover.png') no-repeat;
  background-position: 25px 4px;
}
.notice_list{
  height: 210px;
  overflow: hidden;
}
.notice_list li{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  line-height: 25px;
  margin-top: 8px;
  cursor: pointer;
}
.notice_list li p:first-child{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 260px;
}
.notice_list li p:last-child{
  width: 80px;
  text-align: right;
}
.notice_list li:first-child{
  margin-top: 16px;
}
.notice_list li p{
  font-size: 16px;
}
.notice_list li.active{
  color:rgba(204,41,41,1);
  margin-top: 8px;
}
@media only screen and (min-width: 1700px) and (max-width: 1920px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 80px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 70px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1600px) and (max-width: 1700px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 60px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 50px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1500px) and (max-width: 1600px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 50px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1500px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 40px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 30px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1300px) and (max-width: 1400px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 30px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1300px){
  .notice_shadow{
    width: 387px;
    height: 265px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 0px;
    opacity: 0.5;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
  }
  .notice{
    width: 387px;
    height: 285px;
    background: #ffffff;
    position: absolute;
    z-index: 8;
    top: 10px;
    right: 10px;
    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.31);
    box-sizing: border-box;
    padding: 16px 24px;
  }
}
// ---------------------------------------------------------
.Lecturer{
  width: 1200px;
  height: 429px;
  margin: 60px auto 0px;
}
.Lecturer_title{
  font-size:20px;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:29px;
}
.Lecturer_content{
  margin-top: 10px;
  width: 1200px;
  height: 390px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tip1{
  background: #FAAD14;
}
.tip2{
  background: #08979C;
}
.tip3{
  background: #FF7A45;
}
.tip4{
  background: #1890FF;
}
.tip5{
  background: rgb(219, 29, 203);
}
.tip6{
  background: rgb(3, 88, 41);
}
.articlet{
  width:608px;
  height:280px;
  margin: 0 auto;
  overflow: hidden;
}
.articles{
  width:608px;
  height:280px;
  margin: 0 auto;
  box-sizing: border-box;
  // padding: 35px 50px 35px 201px;
  // overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  // white-space: nowrap;
}
.article_tip{
  width:608px;
  height:280px;
  // float: left;
  margin: 0 auto;
  box-sizing: border-box;
  // background: #FF7A45;
  padding: 35px 50px 35px 201px;
  // display: none;
}
.article_tip li{
  width: 357px;
  overflow: hidden;
  font-size:14px;
  color:rgba(251,251,251,1);
  line-height:25px;
  text-align: left;
  // word-break:break-all;
}
.article_tip li:last-child{
  height: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.article_tip li:first-child{
  font-size:20px;
  color:rgba(251,251,251,1);
  line-height:26px;
  margin-bottom: 18px;
}
.swiper-button-nexts{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 320px;
  right: 3px;
  outline: none;
  background: url('../assets/img/right.png') no-repeat;
}
.swiper-button-prevs{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 320px;
  left: 3px;
  outline: none;
  background: url('../assets/img/left.png') no-repeat;
}
.Botts{
  width: 100%;
  height: 292px;
  position: relative;
  z-index: 2;
  margin-top: -100px;
}
.article_bottom{
  // display: flex;
  // flex-direction: row;
  // align-items:flex-end;
  height: 292px;
  margin-top: -190px;
  border-bottom: 3px solid rgba(24, 144, 255, 1);
  overflow: hidden;
}
.swiper-containerc{
  width: 1050px;
  height: 292px;
  margin: 0px auto;
  overflow: hidden;
}
.article_bottom img{
  width: 101px;
  height: 137px;
  margin: 155px auto 0px;
}
.swiper-wrapper .swiper-slide:nth-child(8){
  width: 220px;
}
.swiper-wrapper .swiper-slide:nth-child(8) img{
  width: 216px;
  height: 288px;
  margin-top: 4px;
}
.swiper-slide{
  text-align: center;
}
.swiper-wrapper{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.article_bottom span:last-child{
  margin-left: 40px;
}
.article_bottom span:last-child img{
  margin-top: -100px;
  cursor: pointer;
}
.article_bottom span:first-child img{
  margin-top: -100px;
  cursor: pointer;
}
.article_bottom span:first-child{
  margin-left: 35px;
  margin-top: -43px;
}
.art_img{
  width: 961px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
  z-index: 8
}
.art_img li{
  margin-left: 40px;
  position: relative;
  z-index: 9;
}
.art_img li img{
  width: 101px;
  height: 137px;
}
.art_img li:nth-child(2) img{
  width: 216px;
  height: 288px;
}
</style>
